<template>
  <div id="chart6_4" style="width: 100%;height:100%;"></div>
</template>

<script>
export default {
  name: "echart4",
  data(){
    return{
      data_List: [{
        "name": "原材料生产人才",
        "value": 30
      }, {
        "name": "装配式制造人才",
        "value": 50
      }, {
        "name": "建筑施工人才",
        "value": 26
      }, {
        "name": "物流人才",
        "value": 24
      }, {
        "name": "服务业人才",
        "value": 24
      }]
    }
  },
  mounted() {

  },
  methods:{
    initEcharts1(dataList2) {
      console.log(dataList2,"222222")
      var names = dataList2.map(item => {
        return item.categoryName
      })
      var values = dataList2.map(item => {
        return item.rankIndex
      })
      var that = this
      var myChart = that.$echarts.init(document.getElementById('chart6_4'));
      // 渐变色 设置
      var color1=that.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        offset: 0,
        color: "#e30430" // 0% 处的颜色
      },{
        offset: 1,
        color: "#f6c6a2" // 100% 处的颜色
      }], false)
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data:names,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval:0,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12"
              }
            },
            axisLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12"
              }
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
                // width: 1,
                // type: "solid"
              }
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          }
        ],
        series: [
          {
            type: "bar",
            barWidth: "40%",
            // data: [200, 300, 300, 900, 900],
            data: values,
            itemStyle: {

              normal:{
                barBorderRadius: 5,
                //右，下，左，上（0，0，0，1）表示从正右开始向左渐变
                color: function(params){
                  var colorList = [
                    ['#31A0E0','#091151'],
                    ['#D72F00','#091151'],
                    ['#F4EC2A','#091151'],
                    ['#E0E0E0','#091151'],
                    ['#3ADD93','#091151'],
                  ];
                  var colorItem = colorList[params.dataIndex];
                  return new that.$echarts.graphic.LinearGradient(0,0.3,0,1,[
                    {
                      offset:0,
                      color: colorItem[0]
                    },
                    {
                      offset:1,
                      color: colorItem[1]
                    }
                  ],false);
                }
              }
            },
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize",function(){
        myChart.resize();
      });
    }
  }
}
</script>

<style scoped>

</style>
